<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<link rel="stylesheet" href="css/index.css">
		<link rel="shortcut icon" type="img/x-icon" href="img/logo.jpg"/>
		<script src="js/jquery-3.3.1.min.js"></script>	
	</head>
	<body>
		<div class="nav">
			<div class="nav-content">
				<img src="img/cha.jpg"/><!--logo图片-->
				<div class="list">
					<ul>
						<li><a href="" class="on">首页</a></li>
						<li><a href="MerchantsDataFenServlet">全部店家</a></li>
						<li><a href="">店家详情</a></li>
						<li><a href="contact.html">菜品详情</a></li>
						<li><a href="contact.html">联系我们</a></li>
						<li><a href="gerenzhongxin.html">个人中心</a></li>
					</ul>
				</div>
				
			</div>	
		</div>
		<!--<div class="banner">
			<div class="bner-pc">
				<img src="img/banner.jpg" alt="" />
				<img src="img/banner2.jpg" alt="" />
			</div>
		</div>-->
		<div class="banner-mide">
			<div class="banner-middle">
			<ul>
				<li><a href="#"><img src="img/banner2.jpg" alt="" /></a></li>
				<li><a href="#"><img src="img/banner.jpg" alt="" /></a></li>
			</ul>
			<div class="btn">
				<a href="javascript:;" class="prev">&lt;</a>
				<a href="javascript:;" class="next">&gt;</a>
			</div>
			<div class="dot">
				<span class="on"></span>
				<span></span>
			</div>
		</div>
		</div>
		<!--<div class="content">
			<div class="item1">
				<a href=""><img src="img/laowanyu.jpg" alt="" /></a>
				<a href=""><img src="img/laowanyu.jpg" alt="" /></a>
				<a href=""><img src="img/laowanyu.jpg" alt="" /></a>
			</div>
		</div>-->
		<!--<div class="main">
			<div class="recommand">
				<span>菜品推荐</span>
				<span  style="color: #C1C1C1;">RECOMMAND</span>
			</div>
		</div>-->
		<div class="seller">
			<div class="seller-con">
				<div class="seller-con-left"></div>
				<p>菜品推荐</p>
				<div class="seller-con-right"></div>
				<h6>美味小吃每一天，健康生活每一刻</h6>
			</div>
		</div>
		<div class="content-pc">
			<div class="pic">
				<div class="pic-left">
					<a href=""><img src="img/lan.jpg" alt="" /></a>
				</div>
				
				<div class="pic-right">
					<ul>
						<li>
							<a href="">
								<div class="smallpc">
									<img src="img/chi.jpg"/>
								</div>
								<p>南非进口黄柠檬6个装</p>
							</a>
							<div class="dotted"></div>
							<div class="second">
								<span>￥</span>
								<span>19.00</span>
								<span>￥25.00</span>				
							</div>
								<a href="">
									<button>购买</button>
								</a>
						</li>
						<li>
							<a href="">
								<div class="smallpc">
									<img src="img/chi.jpg"/>
								</div>
								<p>智力进口新鲜蓝莓4盒</p>
							</a>
							<div class="dotted"></div>
							<div class="second">
								<span>￥</span>
								<span>60.00</span>
								<span>￥65.00</span>				
							</div>
								<a href="">
									<button>购买</button>
								</a>
						</li>
						<li>
							<a href="">
								<div class="smallpc">
									<img src="img/chi.jpg"/>
								</div>
								<p>美国进口红啤梨6个</p>
							</a>
							<div class="dotted"></div>
							<div class="second">
								<span>￥</span>
								<span>18.00</span>
								<span>￥20.00</span>				
							</div>
								<a href="">
									<button>购买</button>
								</a>
						</li>
						<li>
							<a href="">
								<div class="smallpc">
									<img src="img/chi.jpg"/>
								</div>
								<p>美国进口无籽红提500g</p>
							</a>
							<div class="dotted"></div>
							<div class="second">
								<span>￥</span>
								<span>15.00</span>
								<span>￥18.00</span>				
							</div>
								<a href="">
									<button>购买</button>
								</a>
						</li>
						<li>
							<a href="">
								<div class="smallpc">
									<img src="img/chi.jpg"/>
								</div>
								<p>国产绿奇异果16颗</p>
							</a>
							<div class="dotted"></div>
							<div class="second">
								<span>￥</span>
								<span>32.00</span>
								<span>￥38.00</span>				
							</div>
								<a href="">
									<button>购买</button>
								</a>
						</li>
						<li>
							<a href="">
								<div class="smallpc">
									<img src="img/chi.jpg"/>
								</div>
								<p>浙江涌泉蜜桔无核桔子500g</p>
							</a>
							<div class="dotted"></div>
							<div class="second">
								<span>￥</span>
								<span>5.00</span>
								<span>￥8.00</span>				
							</div>
								<a href="">
									<button>购买</button>
								</a>
						</li>
					</ul>
				</div>
			</div>	
		</div>
		<!--<div class="banner-mide">
			<div class="banner-middle">
			<ul>
				<li><a href="#"><img src="img/banner2.jpg" alt="" /></a></li>
				<li><a href="#"><img src="img/banner.jpg" alt="" /></a></li>
			</ul>
			<div class="btn">
				<a href="javascript:;" class="prev">&lt;</a>
				<a href="javascript:;" class="next">&gt;</a>
			</div>
			<div class="dot">
				<span class="on"></span>
				<span></span>
			</div>
		</div>
		</div>-->
		<div class="seller">
			<div class="seller-con">
				<div class="seller-con-left"></div>
				<p>每日新品特卖</p>
				<div class="seller-con-right"></div>
				<h6>新鲜水果每一天，健康生活每一刻</h6>
			</div>
		</div>
		<!--<div class="hodder">
			<div class="hodder-content">
				<div class="hodder-left">
					<span>有机生鲜</span>
					<p>天然无污染水果</p>
					<span class="price">6.8折</span>
					<span class="price1">起</span>
					<div class="details">
						<a href=""><span>查看详情&gt;</span></a>
					</div>
				</div>
				<div class="hodder-right">
					<a href=""><img src="img/mihou.jpg" alt="" /></a>
				</div>
			</div>
		</div>-->
		<div class="info">
			<div class="info-pc">
				<ul>
					<li>
						<a href="">
							<div class="info-img">
								<img src="img/lanmei2.jpg"/>
							</div>
						</a>
					</li>
					<li>
						<a href="">
							<div class="info-img">
								<img src="img/xaing.jpg"/>
							</div>
						</a>
					</li>
					<li>
						<a href="">
							<div class="info-img">
								<img src="img/xaing.jpg"/>
							</div>
						</a>
					</li>
					<li>
						<a href="">
							<div class="info-img">
								<img src="img/xaing.jpg"/>
							</div>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="fruit">
			<div class="fruit-info">
				<h2>菜品资讯</h2>
				<a href=""><span>更多资讯</span></a>
			</div>
		</div>
		<div class="Vegetable">
			<div class="Vegetbl-info">
				<div class="Vegetbl-left">
					<div class="top">
						<ul>
							<li>品种</li>
							<li>地区</li>
							<li>价格</li>
							<li>时间</li>
						</ul>
					</div>
					<div class="scrollbar">
						<ul class="news">
							<li>
								<span>苹果</span>
								<span>商丘市</span>
								<span>6.6kg</span>
								<span>04-13</span>
							</li>
							<li>
								<span>芒果</span>
								<span>焦作市</span>
								<span>5.6kg</span>
								<span>04-13</span>
							</li>
							<li>
								<span>黄瓜</span>
								<span>商丘市</span>
								<span>6.6kg</span>
								<span>04-13</span>
							</li>
							<li>
								<span>菠菜</span>
								<span>信阳市</span>
								<span>7.8kg</span>
								<span>04-13</span>
							</li>
							<li>
								<span>菠萝</span>
								<span>南阳市</span>
								<span>8.6kg</span>
								<span>04-13</span>
							</li>
							<li>
								<span>西瓜</span>
								<span>济源市</span>
								<span>9.6kg</span>
								<span>04-13</span>
							</li>
							<li>
								<span>红柚</span>
								<span>洛阳市</span>
								<span>9.6kg</span>
								<span>04-13</span>
							</li>
							<li>
								<span>梨子</span>
								<span>濮阳市</span>
								<span>9.9kg</span>
								<span>04-13</span>
							</li>
						</ul>
					</div>
				</div>
				<div class="Vegetbl-right">
					<ul class="pc">
						<li><img src="img/laowanyu.jpg"/></li>
						<li><img src="img/cha.jpg"/></li>
						<li><img src="img/chi.jpg"/></li>
					</ul>
				</div>
			</div>	
		</div>
	<div class="foot">
		<div class="footer">
			<div class="footer-bg">
				<!--<div class="footer-bglist">
				<ul>
					<li>
						<img src="img/bottom1.png" alt="" />
						<div class="foot-text">
							<font>食品安全</font><br />
							<span>精选产品，严格质检</span>
						</div>
					</li>
					<li>
						<img src="img/bottom3.png" alt="" />
						<div class="foot-text">
							<font>全城冷链</font><br />
							<span>可靠物流 安全可控</span>
						</div>
					</li>
					<li>
						<img src="img/flower.png" alt="" />
						<div class="foot-text">
							<font>绿色天然</font><br />
							<span>绿色生态 蔬果精选</span>
						</div>
					</li>
					<li>
						<img src="img/bottom2.png" alt="" />
						<div class="foot-text">
							<font>产地直采</font><br />
							<span>限定产源 质量保证</span>
						</div>
					</li>
				</ul>
				</div>-->
				<div class="footer-border">
				</div>
			<div class="footer-list">
				<div class="footer-list1">
				<div>服务保障</div>
				<ul>
					<li>正品保障</li>
					<li>7天无理由退换货</li>
					<li>退货返运费</li>
					<li>7X15小时客户服务</li>
				</ul>
			</div>
			<div class="footer-list1">
				<div>支付方式</div>
				<ul>
					<li>公司转账</li>
					<li>货到付款</li>
					<li>在线支付</li>
					<li>分期付款</li>
				</ul>
			</div>
			<div class="footer-list1">
				<div>商家服务</div>
				<ul>
					<li>配送中心</li>
					<li>广告服务</li>
					<li>服务市场</li>
				</ul>
			</div>
			<div class="footer-list1">
				<div>服务保障</div>
				<ul>
					<li>免运费</li>
					<li>海外配送</li>
					<li>EMS</li>
					<li>211限时达</li>
				</ul>
			</div>
			<div class="copyright">
				Copyright&copy;1996-2018Fresh.All Rights Reserved.
			</div>
			</div>
			</div>
		</div>
	</div>
	<div class="totop">回到<br />顶部</div>
</body>
	<script type="text/javascript">
		$(function(){
			$(window).scroll(function(){
				var $st=$(document).scrollTop();
				console.log($st);
				if($st>=450){
					$(".totop").fadeIn(1000);
				}else{
					$(".totop").fadeOut(1000);
				}
			});
				$(".totop").click(function(){
				$("html,body").animate({"scrollTop":0},1000);
			});
		});
	</script>
	<script type="text/javascript">
		$(function(){
			function move(){
				$(".news").animate({"margin-top":"-20px"},100,function(){
					var $first = $(".news li").eq(0);
					$(".news").css("margin-top","0");
					$(".news").append($first);
				});
			}
			var timer = setInterval(move,600);
			$(".scrollbar").hover(function(){
				clearInterval(timer);
			},function(){
				timer = setInterval(move,600);
			});
		});
	</script>
	<script type="text/javascript">
		$(function(){
			function move(){
				$(".pc").animate({"margin-top":"-272px"},1000,function(){
					var $first = $(".pc li").eq(0);
					$(".pc").css("margin-top","0");
					$(".pc").append($first);
				});
			}
			var timer = setInterval(move,1500);
			$(".Vegetbl-right").hover(function(){
				clearInterval(timer);
			},function(){
				timer = setInterval(move,1500);
			});
		});
	</script>
	<script type="text/javascript">
		$(function(){
			var $index = 0;
			var timer = null;
			$(".next").click(function(){
				$index++; 
				if($index > 2){  
					$index = 0;
				}
				$(".banner-middle ul li").eq($index).stop(true,true).fadeIn().siblings("li").fadeOut();
				$(".dot span").eq($index).addClass("on").siblings("span").removeClass("on");
			});
			$(".prev").click(function(){
				$index--;
				if($index < 0){
					$index = 2;
				}
				$(".banner-middle ul li").eq($index).stop(true,true).fadeIn().siblings("li").fadeOut();
				$(".dot span").eq($index).addClass("on").siblings("span").removeClass("on");
			});
			$(".dot span").click(function(){
				var $i = $(this).index();
				$(this).addClass("on").siblings("span").removeClass("on");
				$(".banner-middle ul li").eq($i).stop(true,true).fadeIn().siblings("li").fadeOut();
			});
			function autoPlay(){
				timer = setInterval(function(){
					$(".next").trigger("click");
				},1300);
			}
			autoPlay();	
			$(".banner-middle").hover(function(){
				clearInterval(timer);
				$(".btn a").fadeIn();
			},function(){
				autoPlay();
				$(".btn a").fadeOut();
			});
		});
	</script>
</html>
